<template>
  <div class="item" :style="{backgroundColor: bgColor}" @mouseenter="itemStatus(true)" @mouseleave="itemStatus(false)">
    <el-row>
      <el-col :span="21"><el-checkbox v-model="todo.status">{{todo.content}}</el-checkbox></el-col>
      <el-col :span="3"><el-button v-show="isShow"  size="mini" type="danger" @click="dele">删除</el-button></el-col>
    </el-row>
  </div>
</template>

<script>
import Pubsub from 'pubsub-js'

export default {
  props: {
    todo: Object,
    index: Number
  },
  data () {
    return {
      bgColor: '#FFFFFF',
      isShow: false
    }
  },
  methods: {
    dele () {
      // this.deleTask(this.index)
      // 发布订阅消息
      Pubsub.publish('deleTask', this.index)
    },
    itemStatus (status) {
      if (status) {
        this.bgColor = '#F4F4F4'
        this.isShow = true
      } else {
        this.bgColor = '#FFFFFF'
        this.isShow = false
      }
    }
  }
}
</script>

<style>
  .item{
    height: 35px;
    border-style:solid;
    border-color:#CCCCCC;
    border-width: 1px;
    border-bottom-width: 0px;
    border-radius: 3px;
  }
  .item .el-col{
    height: 35px;
    line-height: 30px;
    padding-left: 10px;
  }
</style>
